<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div>
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="5" :sm="24" style="padding-right: 5px">
                <a-form-item label="站点标题">
                  <a-input-search @search="searchFriendInfo" v-model="form.site_title" />
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="24" style="padding-left: 5px">
                <a-button type="primary" @click="visible = true">添加友链</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table :columns="columns" :data-source="data" bordered :rowKey="record=>record.site_id" :pagination="pagination">
          <template
            v-for="col in ['site_id', 'site_url', 'site_title']"
            :slot="col"
            slot-scope="text"
          >
            <div :key="col">
              {{ text }}
            </div>
          </template>
          <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
              <a :disabled="editingKey !== ''" @click="edit(record)">编辑</a>
              <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => del(record)">
                <a>删除</a>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </div>
    </template>
    <a-modal v-model="visible" title="编辑框" ok-text="确认" cancel-text="取消" @ok="addFriendInfo">
      <a-form-item
        v-for="(item, index) in addForm"
        :key="index"
        :label="item.title"
        v-if="item.title"
      >
        <a-input
          v-model="item.value"
        />
      </a-form-item>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import {
  getFriendInfo,
  setFriendInfo,
  deleteFriendInfo
} from '@/api/info'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
const columns = [
  {
    title: 'site_id',
    dataIndex: 'site_id',
    width: '25%',
    scopedSlots: { customRender: 'site_id' }
  },
  {
    title: 'site_url',
    dataIndex: 'site_url',
    width: '25%',
    scopedSlots: { customRender: 'site_url' }
  },
  {
    title: 'site_title',
    dataIndex: 'site_title',
    width: '25%',
    scopedSlots: { customRender: 'site_title' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  data () {
    return {
      visible: false,
      data: [],
      columns,
      editingKey: '',
      form: {
        page: 1,
        site_title: ''
      },
      formInfo: this.$form.createForm(this),
      addForm: {
        site_title: {
          title: '站点标题',
          errMessage: '站点标题不能为空',
          value: ''
        },
        site_url: {
          title: '站点域名',
          errMessage: '站点域名不能为空',
          value: ''
        }
      },
      pagination: {
        total: 0,
        onChange: (page) => {
          this.form.page = page
          this.searchFriendInfo()
        }
      }
    }
  },
  components: {
    PageHeaderWrapper
  },
  mounted () {
    this.searchFriendInfo()
  },
  watch: {
    visible (val) {
      if (val) {
        this.addForm = {
          site_title: {
            title: '站点标题',
            errMessage: '站点标题不能为空',
            value: ''
          },
          site_url: {
            title: '站点域名',
            errMessage: '站点域名不能为空',
            value: ''
          }
        }
      }
    }
  },
  methods: {
    searchFriendInfo () {
      getFriendInfo(this.form).then(res => {
        this.data = res.items
        this.pagination.total = res.count ? res.count : 0
      })
    },
    addFriendInfo () {
      setFriendInfo({
        friendInfo: {
          site_title: this.addForm.site_title.value,
          site_url: this.addForm.site_url.value,
          site_id: this.addForm.site_id
        }
      }).then(res => {
        if (!this.addForm.site_id) {
          res.items.site_id = res.items.id
          this.data.push(res.items)
        } else {
          this.data.forEach(element => {
            if (element.site_id === this.addForm.site_id) {
              element.site_url = this.addForm.site_url.value
              element.site_title = this.addForm.site_title.value
            }
          })
        }
      })
      this.visible = false
    },
    edit (record) {
      this.visible = true
      setTimeout(() => {
        this.addForm.site_title.value = record.site_title
        this.addForm.site_url.value = record.site_url
        this.addForm.site_id = record.site_id
      }, 100)
    },
    del (record) {
      deleteFriendInfo(record).then(res => {
        this.$message.success(res.msg)
        this.searchFriendInfo()
      })
    }
  }
}
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px
}
</style>
